<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 新 Bootstrap 核心 CSS 文件 -->
		<!-- <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">		 -->
		<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->

		<link rel="stylesheet" href="./css/base.css">
		<link rel="stylesheet" href="./css/public.css">
		<style>
			.ban-ner{
				width: 100%;
			}
			.ban-ner img{
				width: 100%;
			}
			.box-ul{
				display: flex;
				width: 990px;
				margin: 30px auto;
				flex-wrap: wrap; 				
			}
			.box-ul li{				
				width: 280px;
				height: 280px;
				border: 1px solid #ccc;
				margin: 15px 0;
				margin-left: 33px;
			}
			.li-inner{
				box-sizing: border-box;
				width: 280px;
				height: 280px;
				padding: 20px;
			}
			.my-size{
				width: 68px;
				height: 68px;
				float: left;
			}
			.li-top-right{
				float: left;
				margin-left: 12px;
				margin-top: 8px;
			}
			.li-top-right p{
				font-size: 18px;
				font-weight: 600;
				line-height: 30px;
			}
			.li-top-right span{
				font-size: 14px;
				color: #323232;
				float: left;
			}
			.li-font{
				margin-top: 25px;
				font-size: 12px;
				color: #CCCCCC;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 3;
				-webkit-box-orient: vertical;
			}
			.li-top-bottom{
				margin: 20px 0;
			}
			.li-join{
				float: left;
				background-color: coral;
				border-radius: 25px;
				line-height: 25px;
				padding: 0 12px;
				color: crimson;
				font-size: 13px;
			}
			.li-join img{
				width: 14px;
				margin-right: 1px;
				position: relative;
				bottom: -1px;
			}
			.hot{
				margin-top: 15px;
				font-size: 13px;
			}
			.hot img{
				width: 17px;
				margin-right: 3px;
				vertical-align: bottom;
			}
		</style>
	</head>
	<body>
		<div class="out-box">
			<div class="ban-ner"><img src="img/bannar.jpg"/></div>
			<div class="inner-box">
				<ul class="box-ul">
					<li>
						<div class="li-inner">
							<div class="li-top clear">
								<div class="radius my-size"><img src="img/qqq.jpg"/></div>
								<div class="li-top-right">
									<p>额外全额我去</p>
									<div><span>链客官驱</span> <div class="star">星主</div></div>
								</div>
							</div>
							<p class="li-font">1额为全额委屈二委屈二q为去饿委屈二去而且而且饿 趣味无穷恶气额我去饿我去额为全额委屈二我去而我却额为全额我去额为全额我去qwee</p>
							<div class="hot">热度值 <img src="img/hot.png"></div>
							<div class="li-top-bottom clear">
								<div class="li-join"><img src="img/USDT.png"/><span>300</span> &nbsp;加入星球</div>
								<img />
							</div>
						</div>
					</li>
					
					<li></li>
					<li></li>
				</ul>
			</div>
		</div>
	</body>
	<script crossorigin="anonymous" integrity="sha512-n/4gHW3atM3QqRcbCn6ewmpxcLAHGaDjpEBu4xZd47N0W2oQ+6q7oc3PXstrJYXcbNU1OHdQ1T7pAP+gi5Yu8g==" src="https://lib.baomitu.com/jquery/3.6.0/jquery.js"></script>
	<script>
		var liText = document.getElementsByClassName('li-font')
		for (var i=0;i<liText.length;i++) {
			console.log($('.li-font:eq('+i+')').text())
			let str = $('.li-font:eq('+i+')').text().slice(-6)
			console.log(str)
		}
		
		
		
	</script>
</html>
